<template>
  <div class="dashboard-container">
    <div class="top">
      <div class="left">
        <div class="left-top">
          <div class="left-top-left">
            <div class="title">
              <h3>工单统计</h3>
              <span>2023.03.01 ~ 2023.03.14</span>
            </div>
            <div class="count">
              <div class="gd">
                <p>30</p>
                <span>工单总数（个）</span>
              </div>
              <div class="gd">
                <p>2</p>
                <span>完成工单（个）</span>
              </div>
              <div class="gd">
                <p>0</p>
                <span>进行工单（个）</span>
              </div>
              <div class="gd">
                <p>27</p>
                <span>取消工单（个）</span>
              </div>
            </div>
          </div>
          <div class="left-top-right">
            <div class="title">
              <h3>工单统计</h3>
              <span>2023.03.01 ~ 2023.03.14</span>
            </div>
            <div class="count">
              <div class="gd">
                <p>6562</p>
                <span>订单量（个）</span>
              </div>
              <div class="gd">
                <p>4.37</p>
                <span>销售额（万元）</span>
              </div>
            </div>
          </div>
        </div>
        <div class="left-bottom">
          <div class="head">
            <div class="title">
              <h3>工单统计</h3>
              <span>2023.03.01 ~ 2023.03.14</span>
            </div>
            <div class="btn">
              <span :class="statues === 1? 'setColor' : ''" @click="statues = 1">周</span>
              <span :class="statues === 2? 'setColor' : ''" @click="statues = 2">月</span>
              <span :class="statues === 3? 'setColor' : ''" @click="statues = 3">年</span>
            </div>
          </div>
          <div class="echarts">
            <div ref="line" class="line" />
            <div ref="bar" class="bar" />
          </div>
        </div>
      </div>
      <div class="right">
        <div class="title">
          <h3>工单统计</h3>
          <span>2023.03.01 ~ 2023.03.14</span>
        </div>
        <div class="list">
          <div v-for="(item,index) in list" :key="index" class="goods">
            <div class="index">{{ index + 1 }}</div>
            <div class="goodname">{{ item.skuName }}</div>
            <div class="goodcount">{{ item.count }}单</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="pie">
        <div class="title">
          <h3>合作商点位数Top5</h3>
        </div>
        <div class="pieEcharts">
          <div ref="pie" class="pie1" />
        </div>
      </div>
      <div class="point">
        <div class="title">
          <h3>异常设备监控</h3>
        </div>
        <img src="https://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getStatus, getGd, getaAmountCollect, getaRegionCollect, getaNodeCollect } from '@/api/dashboard'
export default {
  name: 'Dashboard',
  data() {
    return {
      list: [],
      statues: 1,
      lineObj: {},
      barObj: {},
      pieList: JSON.parse(localStorage.getItem('pie')),
      sum: 0
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.getStatus()
    // this.getGd()
    this.getaAmountCollect()
    this.getaRegionCollect()
    this.getaNodeCollect()
  },
  methods: {
    async getStatus() {
      const res = await getStatus('10', '2023-03-01', '2023-03-14')
      this.list = res
    },
    async getGd() {
      await getGd('2023-03-01', '2023-03-14')
    },
    setline() {
      const line = this.$echarts.init(this.$refs.line)
      window.addEventListener('resize', () => {
        line.resize()
      })
      line.setOption({
        title: {
          text: '销售额趋势图',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.lineObj.xAxis
        },
        grid: {
          x: 50,
          x2: 70,
          y: 50,
          y2: 30

        },
        yAxis: {
          name: '单位/元',
          type: 'value'
        },
        tooltip: {
          trigger: 'axis',
          show: true
        },
        series: [
          {
            smooth: true,
            data: this.lineObj.series,
            type: 'line',
            areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#dc3881' // 0% 处的颜色
                    },
                    {
                      offset: 0.7,
                      color: 'rgba(255, 220, 220,0)' // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                }
              }
            }
          }
        ]
      })
    },
    setbar() {
      const bar = this.$echarts.init(this.$refs.bar)
      window.addEventListener('resize', () => {
        bar.resize()
      })
      bar.setOption({
        title: {
          left: 180,
          top: 15,
          text: '销售额分布'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // type: "shadow",
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.barObj.xAxis,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '25',
            data: this.barObj.series
          }
        ]
      })
    },
    setpie() {
      const pie = this.$echarts.init(this.$refs.pie)
      window.addEventListener('resize', () => {
        pie.resize()
      })
      pie.setOption({
        toolbox: {
          show: true
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>({d}%)'
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 100],
            center: ['50%', '50%'],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 8
            },
            label: {
              formatter: `{b}  
              {d}%`
            },
            data: this.pieList
            // data:[{value:12.5%}]
          }
        ]
      })
    },
    async getaAmountCollect() {
      const list = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      const res = await getaAmountCollect(this.statues, '2023-03-13', '2023-03-16')
      res.xAxis = res.xAxis.map(ele => list[new Date(ele).getDay() - 1])
      res.series = res.series.map(ele => ele / 100)
      this.lineObj = { ...res }
      this.setline()
    },
    async getaRegionCollect() {
      const res = await getaRegionCollect('2023-03-13', '2023-03-16')
      res.series = res.series.map(ele => ele / 100)
      this.barObj = { ...res }
      this.setbar()
    },
    async getaNodeCollect() {
      const res = await getaNodeCollect()
      res.forEach(ele => {
        this.sum += ele.value
      })
      // res = res.map(ele => {
      //   ele.value = (ele.value / this.sum * 100) + '%'
      //   return ele
      // })
      // console.log(res)
      // localStorage.setItem('pie', JSON.stringify(res))
      this.pieList = [...res]

      this.setpie()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  .top {
    width: 100%;
    height: 570px;
    display: flex;
    .left {
      width: 75%;
      height: 100%;
      .left-top{
        display: flex;
        .left-top-left {
        width: 650px;
        height: 150px;
        background-color: #e9f3ff;
        border-radius: 20px;
        padding: 15px;
        .title {
          margin-top: 15px;
          margin-bottom: 20px;
          font-size: 14px;
          display: flex;
          h3 {
            line-height: 0;
            margin: 0;
          }
          span {
            margin: 0;
            line-height: 0;
            font-size: 12px;
            color: #999;
            margin-left: 10px;
          }
        }
        .count {
          display: flex;
          .gd {
            flex: 1;
            display: flex;
            flex-direction: column;
            text-align: center;
            color: #91a7dc;
            font-size: 12px;
          }
          p {
            color: #072074;
            font-size: 36px;
            margin: 0;
            margin: 10px 0;
            font-weight: 700;
          }
        }
       }
      .left-top-right {
        margin-left: 20px;
        width: 700px;
        height: 150px;
        background-color: #fbefe8;
        border-radius: 20px;
        padding: 15px;
         .title {
          margin-top: 15px;
          margin-bottom: 20px;
          font-size: 14px;
          display: flex;
          h3 {
            line-height: 0;
            margin: 0;
          }
          span {
            margin: 0;
            line-height: 0;
            font-size: 12px;
            color: #999;
            margin-left: 10px;
          }
        }
        .count {
          display: flex;
          .gd {
            flex: 1;
            display: flex;
            flex-direction: column;
            text-align: center;
            color: #de9690;
            font-size: 12px;
          }
          p {
            color: #ff5757;
            font-size: 36px;
            margin: 0;
            margin: 10px 0;
            font-weight: 700;
          }
        }
        }

      }
      .left-bottom {
        padding: 20px;
        width: 100%;
        height: 400px;
        background-color: #fff;
        border-radius: 20px;
        margin-top: 20px;
        .head {
          display: flex;
          justify-content: space-between;
          margin-bottom: 30px;
          .title {
          margin-top: 15px;
          margin-bottom: 20px;
          font-size: 14px;
          display: flex;
          h3 {
            line-height: 0;
            margin: 0;
          }
          span {
            margin: 0;
            line-height: 0;
            font-size: 12px;
            color: #999;
            margin-left: 10px;
          }
        }
        .btn {
          width: 130px;
          height: 35px;
          background-color: #f7fbff;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          span {
            display: block;
            width: 35px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            cursor: pointer;
          }
          .setColor {
            background-color: #fff;
            border-radius: 5px;
          }
        }
        }
        .echarts {
          display: flex;
          width: 100%;
          height: 278px;
          .line {
          flex: 1;
          margin-right: 20px;
        }
        .bar {
          flex: 1;
        }
        }
      }
    }
    .right {
      flex: 1;
      background-color: #fff;
      margin-left: 20px;
      border-radius: 20px;
      padding: 15px;
      display: block;
        .title {
          margin-top: 15px;
          margin-bottom: 30px;
          font-size: 14px;
          display: flex;
          h3 {
            line-height: 0;
            margin: 0;
          }
          span {
            margin: 0;
            line-height: 0;
            font-size: 12px;
            color: #999;
            margin-left: 10px;
          }
        }
        .list {
          .goods {
            display: flex;
            height: 50px;
            .index {
              font-size: 16px;
              font-weight: 700;
              width: 50px;
              text-align: center;
            }
            .goodcount {
              width: 100px;
              text-align: right;
            }
            .goodname {
              flex: 1;
              text-align: center;
            }
          }
        }
    }
  }
  .bottom {
    width: 100%;
    height: 500px;
    display: flex;
    // padding: 20px;
    margin-top: 20px;
    border-radius: 20px;
    .pie {
      width: 60%;
      height: 100%;
      background-color: #fff;
      border-radius: 20px;
      margin-right: 20px;
      padding: 20px;
       .title {
          margin-top: 15px;
          margin-bottom: 30px;
          font-size: 14px;
          display: flex;
          h3 {
            line-height: 0;
            margin: 0;
          }
          span {
            margin: 0;
            line-height: 0;
            font-size: 12px;
            color: #999;
            margin-left: 10px;
          }
        }
      .pieEcharts {
        display: flex;
        width: 100%;
        height: 370px;
        .pie1 {
          width: 70%;
          height: 100%;
        }
      }
    }
    .point {
      width: 40%;
      height: 100%;
      border-radius: 20px;
      padding: 20px;
      position: relative;
      background-color: #fff;
      img {
        width: 123px;
        height: 96px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
      }
       .title {
          margin-top: 15px;
          margin-bottom: 20px;
          font-size: 14px;
          display: flex;
          h3 {
            line-height: 0;
            margin: 0;
          }
          span {
            margin: 0;
            line-height: 0;
            font-size: 12px;
            color: #999;
            margin-left: 10px;
          }
        }
    }
  }
}
</style>
